|
描述 受保护的路由中有一个请求，只有在处理验证后才能处理。访问和刷新令牌位于Cookie中，并附加到所有必要的请求。 问题：访问令牌过期后，后端返回400，应该在axios拦截器中用refreshing token处理block，但首先来自保护路由的请求，然后刷新 屏幕
Axios拦截器：import axios from 'axios';
import { API } from '@/constants/api';
import AuthService from '@/services/AuthService';
export const axiosInstance = axios.create({
baseURL: API.base,
timeout: 15000,
withCredentials: true,
});
axiosInstance.interceptors.request.use(
async (config) => config,
async (error) => Promise.reject(error),
);
axiosInstance.interceptors.response.use(
async (response) => response,
async (error) => {
const config = error?.config;
if (error?.response?.status === 400 && !config?.sent) {
await AuthService.refreshTokenPair();
return axiosInstance.request(config);
}
return Promise.reject(error);
},
);
export default axiosInstance;保护路由：const ProtectedRoute = observer((): JSX.Element => {
const { isAuth } = userStore;
const handleUnauthorized = () => {
userStore.isAuth = false;
};
useLayoutEffect(() => {
const verify = async () => {
const verifyDetails = await AuthService.verifyAccessToken();
const details = await UserService.getUserDetails(verifyDetails?.id);
if (!details) {
handleUnauthorized();
return;
}
userStore.user = details;
userStore.isAuth = true;
};
verify();
}, []);
if (!isAuth) {
return ;
}
return ;
});
export default memo(ProtectedRoute);
|